<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" >

<title>数据可视化页面流程 | 没想好的个人博客</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

<!-- <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> -->
   <!-- Font Awesome CSS-->
   <link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">

   <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/5.7.2/css/all.min.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<link rel="shortcut icon" href="https://shixixiyue.gitee.io//favicon.ico?v=1709791195950">
<link rel="stylesheet" href="https://shixixiyue.gitee.io//styles/main.css">



<link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
<script src="https://jsd.onmicrosoft.cn/npm/vue/dist/vue.js"></script>


<style>
  .hljs-ln{
    padding-bottom: 1.2rem;
    margin: 0rem !important;
  }
  .hljs-ln td {
    border: none !important;
    padding: 2px 6px !important;
    line-height: 1.2rem;
    font-size: 1rem;
  }
  .hljs-ln tr td:first-child  {
    color: cadetblue;
    border-right: 1px solid !important;
  }
  .hljs-ln tr {
    border: none !important;
  }
</style>

    <meta name="description" content="背景1：最近MES的项目做的差不多了，也上线了一段时间，需要一个数据看板放在首页上，就是常见的数据可视化，或者大屏，因为之前没有做过，这里把过程记录分享一下，做为积累；
背景2：对于可视化其实需求很模糊，现场对相关的报表会提出需求，但是是否..." />
    <meta name="keywords" content="产品,其他" />
  </head>
  <body>
    <div id="app" class="main">

      <div class="sidebar" :class="{ 'full-height': menuVisible }">
  <div class="top-container" data-aos="fade-right">
    <div class="top-header-container">
      <a class="site-title-container" href="https://shixixiyue.gitee.io/">
        <img src="https://shixixiyue.gitee.io//images/avatar.png?v=1709791195950" class="site-logo">
        <h1 class="site-title">没想好的个人博客</h1>
      </a>
      <div class="menu-btn" @click="menuVisible = !menuVisible">
        <div class="line"></div>
      </div>
    </div>
    <div>
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            首页
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/4gOKry8Qv/" class="site-nav">
            .Net Core
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/njETBpqXu/" class="site-nav">
            FineUICore
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/XyXyeLOBB" class="site-nav">
            读书笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/TyVX6hfCJ" class="site-nav">
            Vue笔记
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/3Hz2sPtzO/" class="site-nav">
            产品
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tag/Db1wShB_E" class="site-nav">
            其他
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io/" class="site-nav">
            一一一一一一一一一
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//archives" class="site-nav">
            文章归档
          </a>
        
      
        
          <a href="https://shixixiyue.gitee.io//tags" class="site-nav">
            全部标签
          </a>
        
      
    </div>
  </div>
  <div class="bottom-container" data-aos="flip-up" data-aos-offset="0">
    <div class="social-container">
      
        
      
        
      
        
      
        
      
        
      
    </div>
    <div class="site-description">
      没事啥都说
    </div>
    <div class="site-footer">
      QQ：<a href="tencent://message/?uin=935732994&Site=''&Menu=yes">935732994<a/> <a href="http://beian.miit.gov.cn">京ICP备2024045283号<a/> | <a class="rss" href="https://shixixiyue.gitee.io//atom.xml" target="_blank">RSS</a>
    </div>
  </div>
</div>


      <div class="main-container">
        <div class="content-container" data-aos="fade-up">
          <div class="post-detail">
            <h2 class="post-title">数据可视化页面流程</h2>
            <div class="post-date">2022-11-06
            
                
                  <a href="https://shixixiyue.gitee.io/tag/3Hz2sPtzO/" class="tag">
                    产品
                  </a>
                
                  <a href="https://shixixiyue.gitee.io/tag/Db1wShB_E/" class="tag">
                    其他
                  </a>
                
            </div>
            
              <div class="feature-container" style="background-image: url('https://shixixiyue.gitee.io//post-images/shu-ju-ke-shi-hua-ye-mian-liu-cheng.png')">
              </div>
            
            <div class="post-content" v-pre>
              <p>背景1：最近MES的项目做的差不多了，也上线了一段时间，需要一个数据看板放在首页上，就是常见的数据可视化，或者大屏，因为之前没有做过，这里把过程记录分享一下，做为积累；</p>
<p>背景2：对于可视化其实需求很模糊，现场对相关的报表会提出需求，但是是否统计的数据就有用，或者还有哪些数据是挖不到的，这里最好交给有经验的三方公司去干，由于业务的复杂性和数据保密以及成本，只能内部先做一版（就是画原型），这里需要自行去挖掘一些数据，找出一些有用的数据，作为铺垫。</p>
<!-- more -->
<p><ul class="markdownIt-TOC">
<li>
<ul>
<li>
<ul>
<li><a href="#%E8%83%8C%E6%99%AF">背景</a></li>
<li><a href="#%E5%88%86%E6%9E%90">分析</a></li>
<li><a href="#%E6%AD%A5%E9%AA%A4">步骤</a>
<ul>
<li><a href="#1-%E7%BD%97%E5%88%97%E6%8C%87%E6%A0%87%E7%BB%B4%E5%BA%A6">1. 罗列指标维度</a>
<ul>
<li><a href="#11%E7%B4%AF%E8%AE%A1%E6%95%B0%E9%87%8F">1.1累计数量</a></li>
<li><a href="#12%E6%97%B6%E9%97%B4%E7%BB%B4%E5%BA%A6">1.2时间维度</a></li>
<li><a href="#13%E7%B1%BB%E5%88%AB">1.3类别</a></li>
<li><a href="#14-%E4%BA%A4%E5%8F%89%E6%95%B0%E6%8D%AE">1.4 交叉数据</a></li>
</ul>
</li>
<li><a href="#2%E6%9C%89%E6%95%88%E6%80%A7%E5%88%86%E6%9E%90">2.有效性分析</a></li>
<li><a href="#3%E7%A1%AE%E5%AE%9A%E5%9B%BE%E8%A1%A8%E7%B1%BB%E5%9E%8B">3.确定图表类型</a></li>
<li><a href="#4%E5%B8%83%E5%B1%80%E6%8E%92%E7%89%88-%E5%92%8C-%E4%B8%8A%E8%89%B2">4.布局排版 和 上色</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</p>
<h3 id="背景">背景</h3>
<p>背景1：最近MES的项目做的差不多了，也上线了一段时间，需要一个数据看板放在首页上，就是常见的数据可视化，或者大屏，因为之前没有做过，这里把过程记录分享一下，做为积累；</p>
<p>背景2：对于可视化其实需求很模糊，现场对相关的报表会提出需求，但是是否统计的数据就有用，或者还有哪些数据是挖不到的，这里最好交给有经验的三方公司去干，由于业务的复杂性和数据保密以及成本，只能内部先做一版（就是画原型），这里需要自行去挖掘一些数据，找出一些有用的数据，作为铺垫。</p>
<h3 id="分析">分析</h3>
<p>首先是，对于大屏数据展示的分析，要知道我最终要干什么，略，我会单独总结一次（作为内部资料☺）。</p>
<h3 id="步骤">步骤</h3>
<p>大体分为以下几步，罗列指标和维度（就是提取数据项）- 有效性分析 - 确定图表类型 - 布局排版 和 上色；</p>
<h4 id="1-罗列指标维度">1. 罗列指标维度</h4>
<p>罗列指标和维度，即提取数据项，从业务模块开始，首先将各模块列出来，需要一个思维导图，百度脑图就行，我这里为知笔记自带，对照模块字段(我直接看数据库表设计)，从以下维度寻找可以统计的数据，这里可以不先考虑是否有效，只要有这个字段，就写出来，</p>
<h5 id="11累计数量">1.1累计数量</h5>
<p>就是表里有多少条数据，或者一列数据的累计，就一个数，N，工令单表就是 累计工单数量 N，出库就是 累计出库 N ；</p>
<h5 id="12时间维度">1.2时间维度</h5>
<p>从时间维度入手，比如新增时间，更新时间，处理时间，列出，月度，季度，过去一个月，过去七天，同比，环比等 ，这是一组数 []</p>
<h5 id="13类别">1.3类别</h5>
<p>就是可分类字典项维度，比如 单据状态，客户，产品型号，等统计数量，这些数据往往一个表里，以分类码区分，新增单据N 完成单据 N 未完成N 是一组数据 [N]</p>
<h5 id="14-交叉数据">1.4 交叉数据</h5>
<p>多维度数据的组合，时间和类别的组合，或者类别和类别的组合，比如 本月未完成单据，和上月未完成单据，或者这个客户本月新增的单据数量 N</p>
<p>以上的数据内容是作为开发人员或者产品经理可以直观拿到的数据，接下来还要进行干系人头脑风暴，从需求出发查找遗漏；</p>
<h4 id="2有效性分析">2.有效性分析</h4>
<p>即验证指标，做取舍，业务项的数据较多，需要判断出哪些是有意义的，或者哪些是无法统计的，屏幕上显示的数据是有限的，这里可以从需求出发，就是哪些人会看这些数据（对于MES系统 现场情况 和 质量情况 是比较关注的）。需要结合实际业务，比如罗列项里有一条 每日出库量，但是实际上一个星期也只有一个出库单，所以这条就作废了，应该按月统计，在思维导图上（这时思维导图应该是两层，第一层是模块，第二次是数据项 ）第三层标注作废，并写上原因，虽然这些项目前无法统计或没有意义，不代表以后不能统计（保留过程资产！！）。</p>
<figure data-type="image" tabindex="1"><img src="https://shixixiyue.gitee.io//post-images/1700622725222.png" alt="" loading="lazy"></figure>
<h4 id="3确定图表类型">3.确定图表类型</h4>
<p>上面的步骤解决了数据可视化的前两个字，接下来解决后三字。首先要对各个图表有个概念，下面这个图随便一搜就能见到；</p>
<figure data-type="image" tabindex="2"><img src="https://shixixiyue.gitee.io//post-images/1700622736495.png" alt="" loading="lazy"></figure>
<p>结合数据，直接数字的 N ，就是标题 + 数字即可，或者仪表盘（有目标的数）；时间维度的，用柱状图 或者 折线图 ；类别维度的 用饼图 堆积图 环形图；交叉数据 就用 面积图 或 柱状图加折线图。</p>
<p>这里不能想像，在有了概念之后需要看一眼图到底合不合适，因为有的数据量会比较少，放上折线图不好看，所以这里我使用了微软的Power BI工具（帆软应该也可以），注册账号可以看<a href="http://www.sc-rh.com/kjjj/20220419/400256324.html">这个</a> 。直连测试数据库，网上资料不少，花了一下午都巴拉会了，拖拽一下，把罗列的数据项一个一个的都画出来（这里可能还会再出一个分享），先按模块做图表页，把一个模块的数据放一起；一个数据可以多画几个，便于搭配，作为基础组件先随意摆着就行了。</p>
<h4 id="4布局排版-和-上色">4.布局排版 和 上色</h4>
<p>我也不是专业设计美工，可以在纸上画画，这里还是从模块开始，在Power BI新建一页，设置画布大小，如果视图上要放5个模块的数据，先拉5个方框，然后摆一摆，填满之后再放元素，这就是一个画草稿推了重新画的过程，注意保留版本即可（如果有看着差不多的可以复制该页面建立副本），基本迭代三四版就差不多了。可以翻一翻百度，找些灵感。</p>
<p>上色的话可以先用纯色，然后再找背景图搭一下，一个大背景，各模块有透明度背景或浅色背景，不要背景色最次来个边框，都是一般做法我也说不出来啥，随缘。</p>
<p>到这里，终于就到了写周报的时间（整个步骤花费了一周），高可用的原型画完了：穷举了可用项，创建了一大堆组件，进行了简单布局；接下来就可以进入评审和开发了。</p>

            </div>
            
              <div class="tag-container">
                
                  <a href="https://shixixiyue.gitee.io/tag/3Hz2sPtzO/" class="tag">
                    产品
                  </a>
                
                  <a href="https://shixixiyue.gitee.io/tag/Db1wShB_E/" class="tag">
                    其他
                  </a>
                
              </div>
            
            
              <div class="next-post">
                <div class="next">下一篇</div>
                <a href="https://shixixiyue.gitee.io/dai-ma-fen-xiang-de-dao-zhi-ding-te-xing-de-fang-fa/">
                  <h3 class="post-title">
                    代码分享-得到指定特性的方法
                  </h3>
                </a>
              </div>
            

            

          </div>

        </div>
      </div>
    </div>

    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
<script type="application/javascript">

AOS.init();

var app = new Vue({
  el: '#app',
  data: {
    menuVisible: false,
  },
})

</script>


  <script src="//jsd.onmicrosoft.cn/gh/highlightjs/cdn-release@11.5.1/build/highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
    //hljs.registerLanguage('mermaid', window.hljsDefineMermaid);
  </script>
  <script src="//jsd.onmicrosoft.cn/npm/highlightjs-line-numbers.js@2.8.0/dist/highlightjs-line-numbers.min.js"></script>
  <script>
    hljs.initLineNumbersOnLoad({
      singleLine: true
    });
  </script>
 <script src="https://jsd.onmicrosoft.cn/npm/mermaid/dist/mermaid.min.js"></script>
   <script>
    mermaid.initialize({
      startOnLoad: true,
      securityLevel: 'loose',
    });
  </script>





  </body>
</html>
